<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-popup"
		:class="[..._classes, `pure-popup--${status}`]"
		:style="_styles"
	>
		<pure-overlay
			:show="show"
			:transparent="!mask"
			@onClick="_handleMaskClick"
			@onStatusChange="_handleStatusChange"
		>
			<view
				class="pure-popup__container"
				@tap.stop
				@click.stop
			>
				<view class="pure-popup__wrapper">
					<!-- Header -->
					<view
						class="pure-popup__header"
						v-if="showNot || $slots.not || title || $slots.title || showOk || $slots.ok"
					>
						<view class="pure-popup__header__button pure-popup__header__button--left">
							<slot name="not">
								<pure-button
									v-if="showNot"
									:text="notText"
									:theme="notTheme"
									v-bind="notOpts"
									link
									@onClick="$emit('onNot')"
								></pure-button>
							</slot>
						</view>

						<!-- Title -->
						<slot name="title">
							<view class="pure-popup__title">
								{{ title }}
							</view>
						</slot>

						<!-- Right -->
						<view class="pure-popup__header__button pure-popup__header__button--right">
							<slot name="ok">
								<pure-button
									v-if="showOk"
									:text="okText"
									:theme="okTheme"
									v-bind="okOpts"
									link
									@onClick="$emit('onOk')"
								></pure-button>
							</slot>
						</view>
					</view>

					<!-- Top -->
					<view class="pure-popup__top">
						<slot name="content-top"> </slot>
					</view>

					<!-- Body -->
					<view class="pure-popup__body">
						<scroll-view
							class="pure-popup__scroll-view"
							:scroll-y="scrollable"
						>
							<view class="pure-popup__content">
								<slot></slot>
							</view>
						</scroll-view>
					</view>

					<!-- Bottom -->
					<view class="pure-popup__bottom">
						<slot name="content-bottom"> </slot>
					</view>

					<!-- Footer	 -->
					<view
						class="pure-popup__footer"
						v-if="_isFooter"
					>
						<slot name="footer">
							<view
								class="pure-popup__footer__button pure-popup__footer__button--cancel"
								v-if="showCancel || $slots.cancel"
							>
								<slot name="cancel">
									<pure-button
										:text="cancelText"
										:theme="cancelTheme"
										shape="round"
										v-bind="cancelOpts"
										@onClick="$emit('onCancel')"
									></pure-button>
								</slot>
							</view>
							<view
								class="pure-popup__line pure-popup__line--button"
								v-if="buttonLine"
							></view>
							<view
								class="pure-popup__footer__button pure-popup__footer__button--confirm"
								v-if="showConfirm || $slots.confirm"
							>
								<slot name="confirm">
									<pure-button
										:text="confirmText"
										:theme="confirmTheme"
										shape="round"
										v-bind="confirmOpts"
										@onClick="$emit('onConfirm')"
									></pure-button>
								</slot>
							</view>
						</slot>
					</view>

					<!-- absolute 元素 -->
					<slot name="absolute"></slot>
				</view>

				<!-- Close -->
				<view
					class="pure-popup__close"
					v-if="showClose"
					@tap="$emit('onClose')"
					:hover-class="hoverClass"
				>
					<slot name="close">
						<pure-icon
							:name="closeIconName"
							v-bind="closeIconOpts"
						></pure-icon>
					</slot>
				</view>
			</view>
		</pure-overlay>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, useSlots } from "vue";
	import props from "./props";

	const status = ref("");

	// -------------------------------------------------------------------------------- Slots
	const _slots = useSlots();

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClose", "onConfirm", "onCancel", "onNot", "onOk"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 弹出方向
		if (_props.direction) array.push(`pure-popup--direction--${_props.direction}`);

		// 无 Footer
		if (!_isFooter.value) array.push(`pure-popup--not-footer`);

		// Header Line
		if (_props?.headerLine) array.push(`pure-popup--header-line`);

		// Footer Line
		if (_props?.footerLine) array.push(`pure-popup--footer-line`);

		// 关闭按钮位置
		if (_props.closePosition) array.push(`pure-popup--close--${_props.closePosition}`);
		else array.push(`pure-popup--close--${_closePosition.value}`);

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 宽度
		if (_props?.width) array.push(`--pure-popup-width: ${_props.width}`);

		// 高度
		if (_props?.height) array.push(`--pure-popup-height: ${_props.width}`);

		// 最大宽度
		if (_props?.maxWidth) array.push(`--pure-popup-max-width: ${_props.maxWidth}`);

		// 最大高度
		if (_props?.maxHeight) array.push(`--pure-popup-max-height: ${_props.maxHeight}`);

		return array;
	});

	// 根据弹出方向设置默认的关闭按钮位置
	const _closePosition = computed(() => {
		if (_props.direction === "center") return "bottom";
		return "right";
	});

	// 是否显示 Footer
	const _isFooter = computed(() => {
		if (_props?.showCancel) return true;
		if (_props?.showConfirm) return true;
		if (_slots?.footer) return true;
		if (_slots?.cancel) return true;
		if (_slots?.confirm) return true;
		return false;
	});

	// 遮罩层点击事件
	function _handleMaskClick() {
		if (_props?.mask && _props.maskClickable) {
			_emits("onClose");
		}
	}

	// 状态改变事件
	function _handleStatusChange(newStatus) {
		status.value = newStatus;
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
